<template>
    <div class="platform-page page">
        <div class="content">
            <PlatformCrumb back="返回">
                <el-button type="primary" @click="goAdd" size="mini" slot="right">新增赛事</el-button>
            </PlatformCrumb>
            <div class="tabs">
                <div class="training-content-header">
                    <span>赛事信息</span>
                    <div class="training-content-line"></div>
                </div>
            </div>
            <div class="tabs-container">
                <div class="tabs-con-item" v-for="(item,index) in list" :key="index">
                    <div class="image">
                        <img :src="item.imgs|filtersImg" class="backdrop">
                        <div class="informatton-particulars">
                            <div class="informatton-title">{{item.name}}</div>
                            <div class="informatton-title">场馆</div>
                            <div class="informatton-details">{{item.venue}}</div>
                            <div class="informatton-details">{{item.address}}</div>
                            <div class="informatton-title">时间</div>
                            <div class="informatton-details">{{item.time}}</div>
                            <div class="informatton-title">参赛年龄</div>
                            <div class="informatton-details">{{item.age}}</div>
                        </div>
                    </div>
                    <a class="tabs-button cur" @click="godetail(item.id)">
                        查看详情
                        <img src="/images/right_arrow.png">
                    </a>
                    <div class="edit-deletion">
                        <img src="/images/p-alter.png" @click="goEdit(item.id)" class="alter-a cur">
                        <img src="/images/delect.png" @click="showDelete(index)" class="delect-d cur">
                    </div>
                </div>
            </div>
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total">
            </el-pagination>
        </div>
        <div v-show="isdelete" @click="delete_fun" class="mask"></div>
        <div v-show="isdelete" class="delete_sai">
            <div class="delete_sai_body">
                <div class="delete_sai_body2">
                    <div class="delete_sai_body2_head">
                        <span>删除赛事</span>
                    </div>
                    <div class="delete_sai_body3">
                        <div class="delete_sai_body3_child">
                            <div class="delete_sai_body3_childl">
                                <img :src="deletedata.imgs|filtersImg" alt="">
                            </div>
                            <div class="delete_sai_body3_childr">
                                <h2>
                                    {{deletedata.name}}
                                </h2>
                                <p>{{deletedata.name}}</p>
                                <p>{{deletedata.address}}</p>
                                <p>{{deletedata.time}}</p>
                            </div>
                        </div>
                        <div class="detail_but cur" @click="getDelete(deletedata.id)">
                            删除
                        </div>
                    </div>
                </div>
            </div>
            <i class="el-icon-circle-close cur" @click="delete_fun"></i>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {getList, getDetail, editMatch} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                type: 4,
                pageSize: 9,
                pageNum: 1,
                key: '',
                total: 0,
                list: [],
                isdelete: false,
                deletedata: {
                    address: "",
                    age: "",
                    count: 0,
                    createTime: '',
                    id: 0,
                    imgs: "",
                    money: 0,
                    name: "",
                    reason: '',
                    status: '',
                    sum: '',
                    time: '',
                    type: 0,
                    updateTime: '',
                    userId: 0,
                    venue: "",
                }
            };
        },
        created() {
            this.getList()
        },
        methods: {
            handleClick(row) {
                console.log(row);

            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.getList()
            },
            delete_fun() {
                this.isdelete = !this.isdelete

            },
            godetail(e) {
                var that = this;
                that.$router.push({
                    path: '/platform/matchDetail',
                    query: {
                        id: e
                    }
                })
            },
            goEdit(e) {
                var that = this;
                that.$router.push({
                    path: '/platform/matchEdit',
                    query: {
                        id: e
                    }
                })
            },
            goAdd() {
                var that = this;
                that.$router.push({
                    path: '/platform/matchEdit',
                })
            },
            showDelete(e) {
                this.isdelete = true
                this.deletedata = this.list[e]
            },

            getDelete(e) {
                var that = this;
                editMatch({
                    'status': 1,
                    'id': e,
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        that.isdelete = false
                        that.getList()
                    }
                });
            },
            getList() {
                getList({
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize,
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.total
                });
            }
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }
    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    .operation {
        margin-right: 25px;
    }
</style>
